<template>
  <l-calendar :events="events" @dateClick="dateClick" @eventClick="eventClick"></l-calendar>
</template>

<script setup lang="ts">
import { DateClickArg } from '@fullcalendar/interaction';
import { EventItem } from '../../components/calendar/src/types';
import { EventClickArg, EventContentArg  } from '@fullcalendar/core';
import { ref } from 'vue';

let events = ref<EventItem[]>([
  {
    title: '购物',
    start: '2023-04-11 08:00',
    end: '2021-04-11 16:00',
    editable: true
  },
  {
    title: '代码',
    start: '2023-04-10 08:00',
    end: '2023-04-10 16:00'
  },
]) 
let dateClick = (info: DateClickArg) => {
  events.value.push({
    start: info.dateStr + ' 12:00',
    end: info.dateStr + ' 18:00',
    title: '学习'
  })
  console.log(info);
}
let eventClick = (info: EventClickArg) => {
  
}
let eventContent = (arg: EventContentArg) => {
  let el = document.createElement('div')
  let timeTextArr = arg.timeText.split(' - ')
  let start = timeTextArr[0].replace('上午', '').replace('下午', '').replace('时', '')
  let end = timeTextArr[1].replace('上午', '').replace('下午', '').replace('时', '')
  el.innerHTML = `
        <img src="src/assets/logo.png" style="width:20px;height:20px;">
         <div>开始时间: ${start}</div>
         <div>结束时间: ${end}</div>
         <div>标题: ${arg.event._def.title}</div>
        `
  return {
    domNodes: [el]
  }
}
</script>

<style scoped>

</style>